<!--
 * @Author: lmk
 * @Date: 2022-04-15 22:27:06
 * @LastEditTime: 2022-07-01 11:12:40
 * @LastEditors: lmk
 * @Description: 
-->
<template>
  <pageView pageName="around"  :isShowSearch="false"  bannerImage="/img/banner/creativebanner.png">
    <div class="content-view">
      <swiper
        class="swiper-container"
        :modules="modules"
        :pagination="{
          el: '.pagination',
          clickable: true
        }"
        @slideChange='onSlideChange'
        :virtual="true"
      >
        <swiper-slide
          v-for="(slideContent, index) in state.slides"
          :key="index"
          :virtualIndex="index">
          <div class="grid gap-11 grid-cols-4">
            <div v-for="(item,index) in slideContent" :key="index">
              <img :src="item.goodsFigureDesc" alt="" class="goodsFigureDesc">
              <p class="name truncate">{{isZh ? item.goodsName : item.goodsNameEnglish}}</p>
              <div class="flex justify-between items-end">
                <p class="price">{{item.goodsPrice}}</p>
                <a class="buyBtn" target="_blank" :href="item.goodsJumpUrl">{{$t('around.buyBtn')}}</a>
              </div>
            </div>
          </div>
        </swiper-slide>
      </swiper>
      <div class="pagination"></div>
    </div>
    
  </pageView>
</template>

<script>
import pageView from '@/components/pageView'
import { Pagination,Virtual } from 'swiper';
import { Swiper, SwiperSlide } from "swiper/vue/swiper-vue";

import "swiper/swiper-bundle.css";
import { useRouter } from 'vue-router';
import { useIsZh } from '@/utils/useIsZh';
import { reactive, ref } from '@vue/reactivity';
import { pageWebsiteGoods } from '@/api/api';
export default {
  setup() {
    const {isZh} = useIsZh()
    const activeIndex = ref(0)
    // 获取当月数据
    const state = reactive({
      slides:[],
      current:1,
      goodsName:''
    })
    // 监听index变化
    const onSlideChange = (swiper) => {
      state.current = swiper.activeIndex + 1;
      if(!state.slides[state.current - 1]){
        getList()
      }
    };
    // 获取列表
    const getList = ()=>{
      pageWebsiteGoods({
        size:12,
        current:state.current,
        goodsName:state.goodsName
      }).then(res=>{
        if(state.slides.length === 0) state.slides = new Array(res.pages);
        if(state.slides.length>0){
          state.slides[state.current - 1] = res.records
        }
      })
    }
    getList()
    const router = useRouter()
    // 跳转详情
    const detail = item=>{
      router.push(`/news/${item.informationId}`)
    }
    return {
      onSlideChange,
      activeIndex,
      state,
      isZh,
      detail,
      modules:[Pagination,Virtual]
    };
  },
  components: {
    pageView,
    Swiper,
    SwiperSlide,
  }
}
</script>

<style lang="scss" scoped>
.buyBtn{
  background: $activeTxt;
  border-radius: 6px;
  text-align: center;
  color: white;
  font-size: 20px;
  cursor: pointer;
}
.name{
  font-weight: 400;
  color: #FFFFFF;
}
.goodsFigureDesc{
  width: 100%;
}
@media screen and (min-width: 1400px) {
  .goodsFigureDesc{
    height: calc((100vw - 160px - 66px) / 4 * 0.65);
  }
  .buyBtn{
    width: 120px;
    line-height: 40px;
    font-size: 20px;
  }

  .name{
    font-size: 20px;
    margin: 13px 0;
  }
  .price{
    font-size: 20px;
    font-weight: 400;
    color: $activeTxt;
  }
}
@media screen and (max-width: 1401px) {
  .grid-cols-4{
    grid-template-columns:repeat(2, minmax(0, 1fr))
  }
  .goodsFigureDesc{
    height: calc((100vw - 160px - 66px) / 2);
  }
  .buyBtn{
    width: 50px;
    line-height: 20px;
    font-size: 10px;
  }

  .name{
    font-size: 10px;
    margin: 5px 0;
  }
  .price{
    font-size: 10px;
    font-weight: 400;
    color: $activeTxt;
  }
}
</style>